<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header
        style="
          font-size: 40px;
          color: #409eff;
          background-color: rgb(238, 241, 246);
        "
        >---北斗定点智能垃圾分拣机器人产品实时追踪平台---
      </el-header>

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>服务</template
              >
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="feedback"
                  >反馈服务</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>功能</template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="camera">摄像头</el-menu-item>
                <el-menu-item index="2-2" @click="map">地图定位</el-menu-item>
                <el-menu-item index="2-3" @click="guide">导航</el-menu-item>
                <el-menu-item index="2-4" @click="port">串口</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>设置</template
              >
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="person"
                  >用户中心</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main>
<el-steps :active="4" align-center>
  <el-step title="可回收垃圾" description="废纸，塑料，玻璃，金属" icon="el-icon-delete-solid"></el-step>
  <el-step title="有害垃圾" description="废电池，过期药品，废油漆" icon="el-icon-delete"></el-step>
  <el-step title="厨余垃圾" description="剩菜剩饭，骨头，果皮" icon="el-icon-delete-solid"></el-step>
  <el-step title="其他垃圾" description="污损塑料，破旧陶瓷品" icon="el-icon-delete"></el-step>
</el-steps>

          </el-main>

<el-card class="box-card" style="font-size: 40px;color: #606266;background-color: rgb(238, 241, 246);">
  <div class="text item">
垃圾分类（Garbage classification），一般是指按一定规定或标准将垃圾分类投放、收集、运输和处理，从而转变成公共资源的一系列活动的总称。
  </div>
  <div class="text item">
垃圾分类的目的是提高垃圾的资源价值和经济价值，减少垃圾处理量和处理设备的使用，降低处理成本，减少土地资源的消耗，具有社会、经济、生态等几方面的效益。
  </div>
  <div class="text item">
截至2022年10月，我国有86个城市根据《固废法》《循环经济促进法》《城市管理条例》等法律法规的相关规定，在考量各地实际情况的基础上，制订了生活垃圾分类管理的地方性法规或规章，确立了生活垃圾管理工作具体分类标准和实施细则。
  </div>
</el-card>

          <el-footer
            style="
              font-size: 40px;
              color: #67c23a;
              background-color: rgb(238, 241, 246);
            "
            >---全民参与垃圾分类，共享环保低碳生活---
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
    },
    methods: {
    feedback() {
        this.$router.push("/feedback");
    },
    camera(){
      this.$router.push("/camera");
    },
    map(){
      this.$router.push("/map");
    },
    person(){
      this.$router.push("/person");
    },
    guide(){
      this.$router.push("/guide");
    },
    port(){
      this.$router.push("/port");
    },
  }
  }
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 1025px;
  }
</style>